html {
  font-size: 16px;
  color: var(--neutral-10);
}

html,
body {
  background-color: var(--neutral-100);
  @include breakpoint(tablet) {
    background-color: var(--neutral-95);
  }
}

:root {
  --d-max-width: 84rem;
  --wrap-px: 1rem;

  --column-navigation-mini: 5rem;
  --column-blocks: 19rem;

  --column-navigation: minmax(0, 19rem);
  --column-content: minmax(24rem, 1fr);

  --mobile-nav-h: 4.5rem;
}

#main {
  padding-top: var(--header-offset);
}

body {
  &.has-sidebar-page,
  & {
    .wrap {
      box-sizing: border-box;
      max-width: var(--d-max-width);
      padding: 0 var(--wrap-px);
    }

    &:not(:has(.blocks.--right)) {
      #main-outlet-wrapper {
        @include breakpoint(large) {
          grid-template-columns: var(--column-navigation-mini) minmax(0, 1fr);
          column-gap: 0;
          padding-right: 0;
          padding-left: 0;
        }
        @include breakpoint(tablet) {
          grid-template-areas: "content";
          grid-template-columns: 1fr;
        }
        #main-outlet {
          margin-right: 0rem;
        }
        --column-content: minmax(45rem, 1fr);
        grid-template-areas: "navigation content";
        grid-template-columns: var(--column-navigation) var(--column-content);
        .blocks {
          display: none;
        }
      }
    }

    #main-outlet-wrapper {
      @include breakpoint(large) {
        grid-template-columns: var(--column-navigation-mini) minmax(0, 1fr) var(
            --column-blocks
          );
        column-gap: 0;
        padding-left: 0;

        #main-outlet {
          margin-right: 1rem;
          margin-left: 0;
        }
      }

      @include breakpoint(tablet) {
        grid-template-areas: "content";
        grid-template-columns: 1fr;
        padding: 0;

        padding-bottom: calc(
          var(--mobile-nav-h) + env(safe-area-inset-bottom) + 2rem
        );

        .blocks {
          display: none;
        }
      }

      display: grid;
      grid-template-areas: "navigation content blocks";
      grid-template-columns: var(--column-navigation) var(--column-content) var(
          --column-blocks
        );
      margin: 0 auto;
      column-gap: 2rem;

      box-sizing: border-box;
      padding: 0 var(--wrap-px) 0;

      @include breakpoint(large) {
        padding-left: 0;
      }

      .sticky-sidebar {
        display: unset;
      }

      .blocks {
        grid-area: blocks;
      }

      .sidebar-wrapper {
        grid-area: navigation;
      }

      #main-outlet {
        background: var(--neutral-100);
        margin-top: 2rem;
        margin-bottom: 2rem;
        @include breakpoint(large) {
          margin-top: 1rem;
        }
        @include breakpoint(tablet) {
          margin: 0;
          border: 0;
          border-radius: 0;
        }
        padding: 0;
        grid-area: content;

        align-self: flex-start;
        border: var(--border-outer);
        border-radius: var(--rounded-lg);
      }
    }
  }
}

body {
  &.user-invites-page,
  &.user-summary-page {
    #main-outlet-wrapper #main-outlet {
      padding-top: 1rem;
    }
  }

  &.admin-interface {
    #main-outlet-wrapper #main-outlet {
      padding-left: 1rem;
      padding-right: 1rem;
    }
  }
}

@at-root {
  [class*="user-"] {
    &[class*="-page"] {
      #main-outlet-wrapper #main-outlet {
        padding-left: 1rem;
        padding-right: 1rem;
      }
    }
  }
}

#user-card {
  background-color: var(--neutral-100);
}
